<template>
  <el-form-item label="显示标题" v-if="props.showLabel">
    <el-switch v-model="fs.getProps().showLabel" />
  </el-form-item>
  <el-form-item label="是否必填">
    <el-switch v-model="fs.getProps().required" @change="onRequiredChange" />
  </el-form-item>
  <el-form-item label="是否只读" v-if="props.readonly">
    <el-switch v-model="fs.getProps().readonly" />
  </el-form-item>
  <el-form-item label="是否禁用">
    <el-switch v-model="fs.getProps().disabled" />
  </el-form-item>
</template>

<script setup lang="ts">
import { ElFormItem, ElSwitch } from 'element-plus'
import { useFlowStore } from '@/stores/flow'

const props = withDefaults(defineProps<{ showLabel?: boolean; required?: boolean; readonly?: boolean }>(), {
  showLabel: true,
  required: true,
  readonly: true
})
const fs = useFlowStore()

const onRequiredChange = (val: any) => {
  debugger
  if (val) {
    fs.getProps().rules = [{ required: true, message: `${fs.getProps().label}必填` }]
  } else {
    fs.getProps().rules = []
  }
}
</script>
